<template>
  <div class="formManage-container">
    <div class="header-title">
      <div>
        <el-menu v-loading="contentStatisticsLoading" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">
            <div class="inner-menu-item">
              <p>我发布的</p>
              <span>{{ contentStatistics.publish }}</span>
            </div>
          </el-menu-item>
          <!-- <el-menu-item index="2">
            <div class="inner-menu-item">
              <p>我协作的</p>
              <span>{{contentStatistics.collaborate}}</span>
            </div>
          </el-menu-item> -->
          <el-menu-item index="3">
            <div class="inner-menu-item">
              <p>我的草稿</p>
              <span>{{ contentStatistics.draft }}</span>
            </div>
          </el-menu-item>
          <el-menu-item index="4">
            <div class="inner-menu-item">
              <p>我的收藏</p>
              <span>{{ contentStatistics.collect }}</span>
            </div>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <formList ref="formListRef" :isMyQs="true" :defaultQuery="defaultQuery" :title="formListTitle" />
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import formList from '@/views/form/manage/components/FormList'
import { useStore } from 'vuex'

const store = useStore()
const defaultQuery = {
  searchText: '', //关键词
  status: 100, //状态
  qsType: 0, //问卷类型
  sort: 0, //排序
  currentPage: 1,
  pageSize: 10,
  total: 0,
  listType: 1 //1我发布的 2我协作的 3我的草稿 4我的收藏 5回收站
}
const activeIndex = ref('1')
const formListRef = ref()
const formListTitle = ref('我发布的')
const formListTitleOption = ref({
  1: '我发布的',
  2: '我协作的',
  3: '我的草稿',
  4: '我的收藏'
})
const handleSelect = (key, keyPath) => {
  if (process.env.NODE_ENV === 'development') console.log(key, keyPath)
  formListTitle.value = formListTitleOption.value[key]
  formListRef.value.searchForm.listType = Number(key)
  formListRef.value.handleGetFormManageList()
}
const contentStatisticsLoading = ref(false)
store.dispatch('formDesignInfo/handleGetMyQsStatistics')
const contentStatistics = computed(() => {
  return store.state.formDesignInfo.contentStatistics
})
</script>
<style scoped lang="scss">
.formManage-container {
  width: 100%;
  .header-title {
    margin-bottom: 20px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.04);
    .el-menu-demo {
      border-bottom: none;
      .el-menu-item {
        padding: 0;
        margin: 0 20px;
        border-bottom-width: 4px;
        &:hover,
        &.is-active {
          background-color: inherit;
        }
        &.is-active .inner-menu-item {
          p {
            font-weight: bold;
          }
        }
      }
      .inner-menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 56px;
        p {
          line-height: 16px;
          font-size: 14px;
          margin-bottom: 5px;
        }
        span {
          display: block;
          height: 12px;
          line-height: 12px;
          padding: 0 5px;
          color: #bdbdbd;
          font-size: 12px;
        }
      }
    }
  }
  .card {
    margin-top: 10px;
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
    padding: 20px 20px 30px;
    box-sizing: border-box;
    background-color: #ffffff;
    h2 {
      strong {
        font-size: 18px;
        font-weight: bold;
        margin-right: 20px;
      }
    }
    .form-model-box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 20px;
      .form-model {
        width: 240px;
        height: 100px;
        box-sizing: border-box;
        margin-right: 20px;
        padding: 0 20px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: flex-start;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          transform: scale(1.05);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .description {
          font-size: 14px;
          color: #9f9f9f;
          margin-top: 10px;
        }
      }
    }
  }
  .content {
    .search-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      .left-btns {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .state {
          margin-right: 10px;
        }
      }
      .search {
        i.iconfont {
          color: $mainColor;
          cursor: pointer;
        }
      }
    }
    .qs-list-box {
      margin-top: 30px;
      .qs-list-item {
        width: 100%;
        height: 100px;
        box-sizing: border-box;
        padding: 0 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        transition:
          background-color 0.2s,
          box-shadow 0.2s,
          border-color 0.2s;
        margin-bottom: 10px;
        &:hover {
          background-color: var(--el-color-primary-light-9);
          border-color: var(--el-color-primary-light-5);
          box-shadow: 0 0 10px var(--el-color-primary-light-9);
        }
        .top {
          height: 64px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px #e4e4e4 solid;
          .top-left {
            .collect-btn {
              margin-right: 8px;
              cursor: pointer;
              i {
                color: #d7d7d7;
              }
            }
            .is-collect {
              i {
                color: #ff9700;
              }
            }
            .type {
              margin-right: 8px;
              i {
                font-size: 20px;
              }
            }
            .title {
              font-size: 16px;
              line-height: 18px;
              color: #333;
              @include textEllipsis(18px, 1);
            }
          }
          .top-right {
            width: 500px;
            flex-shrink: 0;
            .nomal-label,
            .answer-num {
              margin-right: 20px;
              color: #797979;
              font-size: 14px;
            }
            .answer-num {
              .answer-label {
                color: #333333;
              }
            }
          }
        }
        .bottom {
          height: calc(100% - 64px);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .bottom-left {
            span {
              font-size: 14px;
              color: #797979;
              margin-right: 8px;
            }
          }
          .bottom-right {
            font-size: 14px;
            .btn {
              color: #333;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-left: 20px;
              cursor: pointer;
              i {
                color: #797979;
                margin-right: 3px;
              }
              .more {
                font-size: 30px;
              }
            }
          }
        }
        .flex-row {
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
    }
  }
}
</style>
